<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>京东登录页面</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="icon" href="image/favicon.ico">
</head>

<body>
    <!-- 最大的容器，包含头部，主体和脚部 -->
    <div class="container">
        <!-- 头部最大的容器 -->
        <div class="head_container">
            <!-- 头部宽度为1190px的容器 -->
            <div class="head_container_box">
                <div>
                    <img src="image/logo-201305-b.png" alt="京东logo">
                </div>
                <div class="welcome">
                    <h1>欢迎登录</h1>
                </div>
                <div class="register">
                    <i class="fa fa-commenting" style="font-size:18px;color:red"></i>
                    <span>
                        <a href="#">登录页面，问卷调查</a>
                    </span>
                </div>
            </div>
        </div>
        <!-- 主体提示语最大的容器 -->
        <div class="section_hint">
            <!-- 主体提示语宽度为1190px的容器 -->
            <div class="section_hint_box">
                <div>
                    <i class="fa fa-warning"></i>
                    依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
                    <span>《京东隐私政策》</span>已上线，将更有利于保护您的个人隐私。
                </div>
            </div>
        </div>
        <!-- 主体背景图和登陆的最大容器 -->
        <div class="section_background">
            <!-- 主体背景图和登陆宽度为1190px的容器 -->
            <div class="section_background_box">
                <!-- 登陆框的容器 -->
                <div class="section_register">
                    <div class="section_register_hint">
                        <i class="fa fa-warning"></i>
                        京东不会以任何理由要求您转账汇款，谨防诈骗。
                    </div>
                    <div class="section_register_method" id="registerMethod">
                        <div class="register_method" id="registerMethods">
                            <div class="register_method1 tts">扫码登录</div>
                            <div class="little_line"></div>
                            <div class="register_method2 tts">账户登录</div>
                        </div>
                        <div class="register_items" id="registerItems">
                            <div class="register_items1 registerItemss">
                                <div class="registerImg">
                                    <div class="registerImg1">
                                        <img src="image/show.png" alt="">
                                    </div>
                                    <div class="registerImgs">
                                        <img src="image/phone-orange.png" alt="">
                                    </div>
                                </div>
                                <div class="registerTxt">
                                    <p>打开
                                        <a href="">手机京东</a>&nbsp;&nbsp;扫描二维码</p>
                                </div>
                                <div class="registerSign">
                                    <ul>
                                        <li>
                                            <i class="fa fa-pencil-square-o"></i>
                                            <span>免输入</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-flash"></i>
                                            <span>更快</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-calendar-o"></i>
                                            <span>更安全</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="register_items2 registerItemss">
                                <div class="register_items2Msg" id="registerMsg"></div>
                                <div class="register_items2Frame">
                                    <div class="username">
                                        <div class="usernameSign">
                                            <i class="fa fa-user-circle-o"></i>
                                        </div>
                                        <input id="usernames" type="text" placeholder="邮箱/用户名/已验证手机">
                                    </div>
                                    <div class="username1">
                                        <div class="usernameSign">
                                            <i class="fa fa-user-circle-o"></i>
                                        </div>
                                        <input type="text" placeholder="密码">
                                    </div>
                                    <div class="username2">忘记密码</div>
                                    <div class="username3">
                                        <a href="">立即登录</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr/>
                        <div class="qq_wechat">
                            <ul>
                                <li class="qq_wechat1">
                                    <i class="fa fa-qq"></i>&nbsp;
                                    <a href="">QQ</a>
                                </li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <li class="qq_wechat2">
                                    <i class="fa fa-weixin"></i>
                                    <a href="">微信</a>
                                </li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <li class="qq_wechat3">
                                    <i class="fa fa-chevron-circle-right"></i>
                                    <a href="../jd-login.html/jd_login1.html">立即注册</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 脚部最大的容器 -->
        <div class="foot_container">
            <!-- 脚部宽度为990px的容器 -->
            <div class="foot_container_box">
                <div class="foot_container_box_content">
                    <a href="#">关于我们</a>
                    <div></div>
                    <a href="#">联系我们</a>
                    <div></div>
                    <a href="#">人才招聘</a>
                    <div></div>
                    <a href="#">商家入驻</a>
                    <div></div>
                    <a href="#">广告服务</a>
                    <div></div>
                    <a href="#">手机京东</a>
                    <div></div>
                    <a href="#">友情链接</a>
                    <div></div>
                    <a href="#">销售联盟</a>
                    <div></div>
                    <a href="#">京东社区</a>
                    <div></div>
                    <a href="#">京东公益</a>
                    <div></div>
                    <a href="#">Eglish Site</a>
                </div>
                <div class="copyright">
                    Copyright © 2004-2018 京东JD.com 版权所有
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var registerMethods = document.getElementById('registerMethods');
    var tts = registerMethods.getElementsByClassName('tts');
    var registerItems = document.getElementById('registerItems');
    var registerItemss = registerItems.getElementsByClassName('registerItemss');
    for (var i = 0; i < tts.length; i++) {
        tts[i].index = i;
        tts[i].onclick = function () {
            for (var j = 0; j < registerItemss.length; j++) {
                registerItemss[j].style.display = 'none'
            }
            registerItemss[this.index].style.display = 'block';
        };
    }
    // 用户名的正则判断
    function $(id) {
        return document.getElementById(id);
    }


    //创建一个id为name的，在失去焦点后的函数
    $('usernames').onblur = function () {
        //正则判断，首字母大写，其他是小写字母，并且姓名长度是4-20位
        var reg = /^[A-Z]+[a-z]{4,20}$/;
        //假如不是正则判断，就会出现下面提示
        if (!reg.test($('usernames').value)) {
            $('registerMsg').innerText = '请输入正确格式，首字母需要大写；长度为4-20';
            $('registerMsg').style.color = 'red';
            //是正则判断就出现下列提示
        } else {
            $('registerMsg').innerText = '输入正确!';
            $('registerMsg').style.color = 'green';
        }
    }
</script>

</html>